{% extends "base/base.html" %}

{% block content %}
    <div class="col-md-12 col-sm-12 col-xs-12" xmlns="http://www.w3.org/1999/html">
        <div class="x_panel">
            <div class="x_title">
                <h2><i class="fa fa-bars"></i> 编辑任务信息
                </h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                           aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Settings 1</a>
                            </li>
                            <li><a href="#">Settings 2</a>
                            </li>
                        </ul>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <form id="taskConfForm" method="POST">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="message">任务描述</label>
                    <textarea required="required" class="form-control" name="desc"
                              placeholder="{{ object.desc }}">{{ object.desc }}</textarea>
                    </div>

                    <div class="form-group">
                        <label for="message">默认执行帐号</label>
                        <input type="text" class="form-control" name="default_user" placeholder="root"
                               value="{{ conf.default_user }}">
                    </div>
                    <div class="form-group">
                        <label for="message">限制帐号执行(服务器执行用户)</label>
                        </br>
                        允许这些帐号执行
                        <input type="radio" class="flat" name="user_action" id="genderM" value="allow"
                                {% ifequal conf.user_action  'allow' %} checked="" {% endifequal %} required/> 拒绝这些帐号执行:
                        <input type="radio" class="flat" name="user_action" id="genderF" value="deny"
                                {% ifequal conf.user_action  'deny' %} checked="" {% endifequal %}/>
                        <input id="user_list" name="user_list" type="text" class="form-control" value="{{ conf.user_list }}"
                               placeholder="帐号列表"/>
                    </div>
                    <div class="form-group">
                        <label for="message">执行超时时间(s)</label>
                        <input type="text" class="form-control" name="timeout" placeholder="超时时间"
                               value="{{ conf.timeout }}">
                    </div>
                    <div class="form-group" id="vars">
                        <button class="btn btn-primary glyphicon glyphicon-plus" id="addVar">添加属性</button>
                        {% if params %}
                            {% for param in params %}


                                <div class="row var-form">
                                    <div class="col-md-2 col-sm-2 col-xs-12">
                                        <input class="date-picker form-control col-md-7 col-xs-12 name"
                                               required="required"
                                               name="name{{ forloop.counter0 }}" type="text" placeholder="属性名" value="{{ param.name }}">
                                    </div>
                                    <div class="col-md-2 col-sm-2 col-xs-12">
                                        <select class="form-control type" required name="type{{ forloop.counter0 }}">
                                            <option value="">属性类型</option>
                                            <option value="input" {% ifequal param.type 'input' %} selected="selected" {% endifequal %} >单行文本</option>
                                            <option value="text" {% ifequal param.type 'text' %} selected="selected" {% endifequal %}>多行文本</option>
                                            <option value="int" {% ifequal param.type 'int' %} selected="selected" {% endifequal %}>数字</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3 col-sm-3 col-xs-12">
                                        <input class="date-picker form-control col-md-7 col-xs-12 default"
                                               name="default{{ forloop.counter0 }}" type="text" placeholder="默认值" value="{{ param.default }}">
                                    </div>
                                    <div class="col-md-3 col-sm-3 col-xs-12">
                                        <textarea class="date-picker form-control col-md-7 col-xs-12 desc"
                                                  name="desc{{ forloop.counter0 }}">{{ param.desc }}</textarea>
                                    </div>
                                    <div class="col-md-1 col-sm-1 col-xs-12">
                                        是否必填<input type="checkbox" class="required" name="required{{ forloop.counter0 }}" value="required" {% if param.required %} checked=""{% endif %}>
                                    </div>
                                    <div class="col-md-1 col-sm-1 col-xs-12">
                                        <button class="btn btn-primary glyphicon glyphicon-minus delete">删除属性</button>
                                    </div>
                                </div>


                            {% endfor %}
                        {% endif %}
                    </div>
                    <input type="submit" class="btn btn-primary" value="提交修改"/>
                </form>

                <div class="row var-form hide" id="varTemplate">
                    <div class="col-md-2 col-sm-2 col-xs-12">
                        <input class="date-picker form-control col-md-7 col-xs-12 name" required="required"
                               name="value" type="text" placeholder="属性名">
                    </div>
                    <div class="col-md-2 col-sm-2 col-xs-12">
                        <select class="form-control type" required name="type">
                            <option value="">属性类型</option>
                            <option value="input">单行文本</option>
                            <option value="text">多行文本</option>
                            <option value="int">数字</option>
                        </select>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-12">
                        <input class="date-picker form-control col-md-7 col-xs-12 default" name="default" type="text"
                               placeholder="默认值">
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-12">
                        <textarea class="date-picker form-control col-md-7 col-xs-12 desc" name="desc"></textarea>
                    </div>
                    <div class="col-md-1 col-sm-1 col-xs-12">
                        是否必填<input type="checkbox" class="required" name="required" value="required">
                    </div>
                    <div class="col-md-1 col-sm-1 col-xs-12">
                        <button class="btn btn-primary glyphicon glyphicon-minus delete">删除属性</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        $(document).ready(function () {
            $('#user_list').tagsInput({
                width: 'auto',
                defaultText: '帐号列表'
            });
            $("#vars .delete").on('click', deleteVar);
        });
        var varIndex = 0;
        $("#addVar").click(function (e) {
            varIndex++;
            var varTemplate = $("#varTemplate").clone().removeClass('hide')
                    .removeAttr('id').attr('var-index', varIndex).attr('id', 'var' + varIndex);
            varTemplate
                    .find('.name').attr('name', 'name' + varIndex).end()
                    .find('.type').attr('name', 'type' + varIndex).end()
                    .find('.desc').attr('name', 'desc' + varIndex).end()
                    .find('.required').attr('name', 'required' + varIndex).end()
                    .find('.default').attr('name', 'default' + varIndex).end();
            $("#vars").append(varTemplate);
            $("#vars .delete").on('click', deleteVar)
        })
    function deleteVar() {
        var row = $(this).parents('.var-form')
        $(row).remove()
    }
    </script>
{% endblock %}